html {
  font-size: 16px;
}
body {
  padding: 0;
  margin: 0;
}
:root {
  --wheel-size: 560;
}
[v-cloak] {
  display: none;
}
#app {
  position: relative;
  height: 100vh;
  overflow: hidden;
}
#app .title {
  text-align: center;
  color: #c7000b;
}
#app .wheel-lucky-container {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 35rem /* 560/16 */;
  height: 35rem /* 560/16 */;
  background-color: #c7000b;
  border-radius: 50%;
  padding: 40px;
}
#app .wheel-lucky-container .light {
  position: absolute;
  top: 0.625rem /* 10/16 */;
  left: 50%;
  transform-origin: center 19.375rem /* 310/16 */;
  height: 1.25rem /* 20/16 */;
  width: 1.25rem /* 20/16 */;
  border-radius: 50%;
}
#app .wheel-lucky-container .light:nth-of-type(even) {
  background-color: #fff;
}
#app .wheel-lucky-container .light:nth-of-type(odd) {
  background-color: yellow;
}
#app .wheel-lucky-container .light-blink-odd {
  animation: blink-odd 1s linear infinite;
}
#app .wheel-lucky-container .light-blink-even {
  animation: blink-even 1s linear infinite;
}
@keyframes blink-odd {
  25% {
    background: #fff;
    box-shadow: 0px 0px 20px #fff;
  }
}
@keyframes blink-even {
  75% {
    background: yellow;
    box-shadow: 0px 0px 20px yellow;
  }
}
#app .wheel-lucky-container .wheel-panel {
  height: 100%;
  width: 100%;
  border-radius: 50%;
  background-color: #fff;
}
#app .wheel-lucky-container .wheel-panel .prize-item {
  position: absolute;
  left: 0;
  right: 0;
  margin: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  color: #c7000b;
  text-align: center;
}
#app .wheel-lucky-container .pointer {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  cursor: pointer;
  width: 5rem /* 80/16 */;
  height: 5rem /* 80/16 */;
  line-height: 5rem /* 80/16 */;
  text-align: center;
  background-color: #c7000b;
  color: #fcc800;
  font-weight: bold;
  font-size: 1.25rem /* 20/16 */;
  border-radius: 50%;
}
#app .wheel-lucky-container .pointer::before {
  position: absolute;
  content: '';
  width: 0;
  height: 0;
  border-bottom: 0.625rem /* 10/16 */ solid #c7000b;
  border-left: 0.3125rem /* 5/16 */ solid transparent;
  border-right: 0.3125rem /* 5/16 */ solid transparent;
  left: 0;
  right: 0;
  margin: auto;
  top: -0.625rem /* 10/16 */;
}
#app .text-luck-comp {
  margin-top: 200px;
  text-align: center;
}
#app .text-luck-comp .text-luck-content {
  display: inline-block;
  width: 96px;
  height: 48px;
  line-height: 48px;
  font-size: 24px;
  font-weight: bold;
  margin-bottom: 12px;
  border: 1px solid #c7000b;
  border-radius: 6px;
}
#app .nine-block-luck-comp {
  margin-top: 200px;
}
#app .nine-block-luck-comp .container {
  display: grid;
  height: 300px;
  width: 300px;
  margin: 0 auto;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: auto;
  gap: 12px;
}
#app .nine-block-luck-comp .container .grid-item {
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #fcc800;
  border-radius: 6px;
  color: #fff;
  box-sizing: border-box;
  border: 3px solid #fcc800;
}
#app .nine-block-luck-comp .container .grid-item:nth-child(5) {
  cursor: pointer;
  border-radius: 50%;
}
#app .nine-block-luck-comp .container .grid-item:nth-child(5) div {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
#app .nine-block-luck-comp .container .grid-item:nth-child(5):active {
  background-color: #eebe77;
}
#app .nine-block-luck-comp .container .grid-item.active {
  border-color: #c7000b;
}
#app .setter-btn {
  position: absolute;
  top: 16px;
  left: 16px;
}
#app .setter-btn button {
  margin-right: 8px;
}
